---
group: 'components'
category: 'state'
title: Row
description: '基于 Flexbox 的12栅格系统'
order: 1
---

## 基础用法

布局的栅格化系统，是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。

```js live=true
() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row>
      <Col span={4}>
          <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}
```

## 设置栅格间距

Gutter 用于设置栅格间距，使用数组形式同时设置[水平间距，垂直间距]

```js live=true
() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row gutter={[50, 20]}>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}
```

## 多行

多行排列，栅格系统默认当栅格数是十二，当没有自定义栅格数且一行当栅格超过了十二，那么剩余当栅格将会换行排列。

```js live=true
() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row gutter={[20, 50]}>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}
```

## Grow自适应

栅格自适应宽度，在一行中，栅格数超过 12 时，剩余栅格占满一行。

```js live=true
() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row grow>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}
```

## Offset偏移

通过给 col 组件设置 offset，可以控制栅格偏移的距离。

```js live=true
() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row>
      <Col span={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
      <Col span={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
      <Col span={3} offset={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
    </Row>
  )
}
```

## Column大小

默认是十二栅格，通过给 Row 组件设置 columns，可以自定义栅格数。

```js live=true
() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row columns={24}>
      <Col span={12}>
        <PlaceHolder>col-12</PlaceHolder>
      </Col>
      <Col span={6}>
         <PlaceHolder>col-6</PlaceHolder>
      </Col>
      <Col span={6}>
        <PlaceHolder>col-6</PlaceHolder>
      </Col>
    </Row>
  )
}
```
